<template>
    <div class="operation-panel">
        <div class="panel-header">
            <h4><el-icon>
                    <ReadingLamp />
                </el-icon>桌面</h4>
            <span>我的收藏 >></span>
        </div>
        <div class="operation-part">
            <div class="operation-item-one" @click="handleSelect(1)">
                <el-icon :size="40">
                    <Edit />
                </el-icon>
                <span>写文章</span>
                <hr>
                <span>( 提问 )</span>
            </div>
            <div class="operation-item-two">
                <el-icon :size="40">
                    <VideoCameraFilled />
                </el-icon>
                <span>发视频</span>
            </div>
            <div class="operation-item-three">
                <el-icon :size="40">
                    <DocumentRemove />
                </el-icon>
                <span>草稿箱</span>
            </div>
            <div class="operation-item-four">
                <el-icon :size="40">
                    <User />
                </el-icon>
                <span>关注的人</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import { ref,reactive } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

//登录信息
const loginInfo = ref({
    avatar: '',
    realName: '',
    role: ''
});
const handleSelect = (key: Number) => {
    if (key == 1) {
        const href = router.resolve({
            name: 'create-article_question',
            path: '/create-article_question',
        })
        window.open(href.href, '_blank');
    }
}


</script>

<style scoped>
.operation-panel {
    padding: 10px;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1);
    background-color: rgb(255, 255, 255);

    .panel-header {
        height: 30px;
        display: flex;
        justify-content: space-between;

        h4 {
            font-weight: bold;
            color: rgb(91, 97, 103);
        }

        span {
            cursor: pointer;
            color: rgb(146, 147, 149);
            transition: all 0.5s;
        }

        span:hover {
            color: rgb(3, 30, 55);
        }
    }

    .operation-part {
        font-size: 12px;
        display: flex;
        justify-content: space-around;
        margin-top: 10px;

        .operation-item-one {
            width: 22%;
            height: 60px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .el-icon {
                transition: all 0.5s;
                border-radius: 100%;
                padding: 5px;
                color: rgb(7, 39, 203);
                background-color: rgba(23, 114, 246, .1)
            }

            span {
                font-weight: bold;
            }
        }

        .operation-item-two {
            width: 22%;
            height: 60px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .el-icon {
                transition: all 0.5s;
                border-radius: 100%;
                padding: 5px;
                color: rgb(255, 115, 0);
                background-color: rgba(252, 138, 68, 0.1);
            }

            span {
                font-weight: bold;
            }
        }

        .operation-item-three {
            width: 22%;
            height: 60px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .el-icon {
                transition: all 0.5s;
                border-radius: 100%;
                padding: 5px;
                color: rgba(174, 92, 236, 0.966);
                background-color: rgba(231, 206, 251, 0.374)
            }

            span {
                font-weight: bold;
            }
        }

        .operation-item-four {
            width: 22%;
            height: 60px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .el-icon {
                transition: all 0.5s;
                border-radius: 100%;
                padding: 5px;
                color: rgb(18, 149, 149);
                background-color: rgba(165, 254, 254, 0.3)
            }

            span {
                font-weight: bold;
            }
        }


        .operation-item-one:hover>.el-icon {
            background-color: rgba(23, 112, 246, 0.41);
        }

        .operation-item-one:hover>span {
            transition: all 0.5s;
            color: rgb(7, 39, 203);
        }

        .operation-item-two:hover>.el-icon {
            background-color: rgba(252, 139, 68, 0.412);
        }

        .operation-item-two:hover>span {
            transition: all 0.5s;
            color: rgb(255, 115, 0);
        }

        .operation-item-three:hover>.el-icon {
            background-color: rgba(231, 206, 251, 0.955)
        }

        .operation-item-three:hover>span {
            transition: all 0.5s;
            color: rgba(174, 92, 236, 0.966);
        }

        .operation-item-four:hover>.el-icon {
            background-color: rgba(165, 254, 254, 0.864)
        }

        .operation-item-four:hover>span {
            transition: all 0.5s;
            color: rgb(18, 149, 149);
        }

    }

}
</style>